<template>
  <headerView
    @initCity="receiveInitCity"
    @searchCity="receiveSearchCity"
    @drawType="receiveDrawType"
    @drawImage="receiveDrawImage"
    :updateZoom="updateZoom"
  />
  <mainView
    :initCity="initCity"
    :searchCity="searchCity"
    :drawType="drawType"
    :drawImage="drawImage"
    @closeDraw="receiveCloseDraw"
    @updateZoom="receiveUpdateZoom"
  />
</template>

<script setup>
import { ref } from 'vue'
import headerView from '@/components/headerView.vue'
import mainView from '@/components/mainView.vue'

const initCity = ref('')
const searchCity = ref('')
const drawType = ref('')
const drawImage = ref('')
const updateZoom = ref(0)
const receiveInitCity = (city) => {
  //console.log('initCity', city)
  initCity.value = city
}
const receiveSearchCity = (city) => {
  //console.log('searchCity', city)
  searchCity.value = city
}
const receiveDrawType = (type) => {
  //console.log('drawType', type)
  drawType.value = type
}
const receiveDrawImage = (image) => {
  //console.log('drawImage', image)
  drawImage.value = image
}

const receiveCloseDraw = () => {
  //console.log('begin', drawType)
  drawType.value = ''
  //console.log('end', drawType)
}
const receiveUpdateZoom = (zoom) => {
  //console.log('updateZoom', zoom)
  updateZoom.value = zoom
}
</script>

<style>
@import 'reset-css';
</style>
